import React from 'react'
import { Route, Switch, Link,Redirect } from 'react-router-dom';
//import './Redux/Content.css';
import Detail from './Detail';
import Home from './Home';
import {useAuth} from './Context'

const Api = ()=>{
    return <h1>Api页面</h1>
}

const New = ({match:{path,url}})=>{
    return (
        <div>
            <h1>新手入门</h1>
            <div>
                <Link to={`${url}/login`}>Login</Link>
                <Link to={`${url}/api`}>API</Link>
            </div>
            <div>
                <Switch>
                    <Route path={path+'/login'} component={Login}/>
                    <Route path={`${path}/api`} component={Api}/>
                    <Redirect to={`${path}/login`} />
                </Switch>
            </div>
        </div>
    )
}
const Collect = ()=>{
    return <h1>收藏页面</h1>
}
const User = ()=>{
    return <h1>个人中心页面</h1>
}
const Login = (props)=>{
    const {setIsLogin} = useAuth();
    const login = ()=>{
        setIsLogin(true)
        localStorage.setItem('isLogin',true);
        // props.history.replace('/')
        props.history.replace(props.location.state||'/')
    }
    return <div>
        <button style={{width: 300,height:50}} onClick={login}>登录</button>
    </div>
}
const PrivateRoute = ({component:Com,...rest})=>{


    return <Route {...rest} render={({location})=>{
        const userinfo = localStorage.getItem('isLogin');
        if(userinfo){
            return  <Com />
        }else{
            return <Redirect to={{
                pathname: '/login',
                state: location.pathname
            }}/>
        }
    }}/>
}

const Content = () => {
    return (
        <div className='conent-wrap'>
            <div className='content'>
                <div className='content-left'>
                    <Switch>
                        <Route exact path='/'>
                            <Home/>
                        </Route>
                        <Route path='/home'>
                            <Home/>
                        </Route>
                        <Route path='/new' component={New}></Route>
                        <Route path='/api' component={Api} />
                        <PrivateRoute path='/collect' component={Collect} />

                        <PrivateRoute path='/user' component={User}/>
                       
                        <Route path='/login' component={Login} />
                        <Route path='/detail/:id'  component={Detail} />

                    </Switch>
                </div>
                <div className='content-right'></div>
            </div>
        </div>
    )
}


export default Content